<template>
  <div class="plugin-reports-order">
    <t-row :gutter="20">
      <t-col :span="3">
        <div class="bg-box">
          <t-statistic 
            :title="plugin.t('order.total')" 
            :value="total.total" 
            :format="app.money.format" 
            :animation="animation"  
            animation-start
          />
        </div>
      </t-col>
      <t-col :span="3">
        <div class="bg-box">
          <t-statistic 
            :title="plugin.t('order.cost_money')" 
            :value="total.cost_money" 
            :format="app.money.format" 
            :animation="animation"  
            animation-start
          />
        </div>
      </t-col>
      <t-col :span="3">
        <div class="bg-box">
          <t-statistic 
            :title="plugin.t('order.profit_money')" 
            :value="total.profit_money" 
            :format="app.money.format" 
            :animation="animation"  
            animation-start
          />
        </div>
      </t-col>
      <t-col :span="3">
        <div class="bg-box">
          <t-statistic 
            :title="plugin.t('order.count')" 
            :value="total.count" 
            :animation="animation" 
            animation-start
          />
        </div>
      </t-col>
    </t-row>
    <Line :list="list" :time="time" />
    <Table :total="total" :list="list" :time="time" />
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import Line from './line.vue'
  import Table from './table.vue'

  const plugin = index.plugin
  const props = defineProps(['factory', 'data'])
  const animation = {
    valueFrom: 0,
    duration: 1000,
  }
  const factory = props.factory
  const total = ref({})
  const list = ref([])
  const time = ref([])

  // 拉取统计数据
  const onTotal = () => {
    const data = props.data.data
    list.value = props.data.list
    total.value = {
      total: Number(data.t ?? 0),
      count: Number(data.c ?? 0),
      cost_money: Number(data.cm ?? 0),
      profit_money: Number(data.pm ?? 0),
      tax_money: Number(data.tm ?? 0),
      req_money: Number(data.rm ?? 0)
    }
    time.value = props.data.time ?? plugin.tm('info.month')
  }

  // 监听
  watch(props, () => {
    onTotal()
  })

  onTotal()
</script>
<style lang="scss">
  .plugin-reports-order{

  }
</style>